'use client';

import { useState } from 'react';
import {
  Box,
  Container,
  Typography,
  AppBar,
  Toolbar,
  Paper,
} from '@mui/material';
import QueryInput from '@/components/query/QueryInput';
import ChartDisplay from '@/components/chart/ChartDisplay';
import { QueryResponse } from '@/types';

export default function Home() {
  const [queryResult, setQueryResult] = useState<QueryResponse | null>(null);

  const handleQueryResult = (result: QueryResponse) => {
    setQueryResult(result);
  };

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
      <AppBar position="static">
        <Toolbar>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            语图 (YuTu)
          </Typography>
        </Toolbar>
      </AppBar>

      <Container maxWidth="lg" sx={{ mt: 4, mb: 4, flex: 1 }}>
        <Paper elevation={3} sx={{ p: 3, mb: 3 }}>
          <Typography variant="h6" gutterBottom>
            自然语言查询
          </Typography>
          <QueryInput onQueryResult={handleQueryResult} />
        </Paper>

        {queryResult && <ChartDisplay queryResult={queryResult} />}
        
      </Container>
    </Box>
  );
}
